<template>
  <div class="user-view" v-if="isComponentLoaded">
    <el-scrollbar class="scroll-bar">
      <component :is="UserForm" ref="moudleRef" />
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "UserView",
  components: {}
});


import { provide, ref, onMounted, type DefineComponent } from 'vue';
import type { ModuleInterface, SendCmd } from "@/common/index";
import { SEND_USER_CMD_KEY, GET_USER_DATA_KEY } from "@/common/index";

import { handleCommand } from '@/utils/commandHandler';
import type { AxiosRequestConfig } from 'axios';
import type { Response } from '@/mctp-api';

import { LoadModules } from "@/utils/loadModules";

// 2. 响应式存储组件（核心）
const UserForm = ref<DefineComponent | null>(null);
let createUserModule: ((sendCmd: SendCmd<any, any>, initialData: any) => ModuleInterface<any>) | null = null;
const isComponentLoaded = ref(false); // 标记组件是否加载完成，控制模板渲染
interface UserFormInstance {
  dataEvent: (value: any) => void; // 匹配组件的 dataEvent 方法定义
}
const moudleRef = ref<(DefineComponent & UserFormInstance) | null>(null);
const index = ref(0);

// 关键：在setup作用域中定义provide的key和函数
// const SEND_USER_CMD_KEY = "send-user-cmd"; // 协商好的字符串Key
// const GET_USER_DATA_KEY = "get-user-data"; // 配套的"获取数据"Key

// 关键：在setup作用域中提供响应式引用
const sendUserCmd = ref<(cmd: string, cmdParams?: any) => any>();
const getUserData = ref<any>();

// 在setup中立即提供这些引用
provide(SEND_USER_CMD_KEY, sendUserCmd);
provide(GET_USER_DATA_KEY, getUserData);

// 用户模块加载函数（支持插件命名机制）
const importMoudule = async () => {
  const moduleName = '用户';
  try {
    const loadModulesInstance = new LoadModules();
    const module = await loadModulesInstance.loadModule(moduleName);

    // 尝试多种方式获取createUserModule
    createUserModule = module.createUserModule || module.default?.createUserModule || module.default;

    // 尝试多种方式获取UserForm，适配不同的模块导出结构
    UserForm.value = module.UserForm || module.default?.UserForm;

    console.log(`用户模块[${moduleName}]加载成功`, { createUserModule, UserForm: module.UserForm });

  } catch (e) {
    console.error(`用户模块[${moduleName}]加载失败`, e);
  }
};

const loadModule = async () => {
  if (!createUserModule) {
    console.error("createUserModule 未加载完成");
    return;
  }
  // 1. EventData 初始值：空对象（业务数据由后端返回，初始无需填充）
  const initialUserData = {};

  // 2. 平台命令处理：完全转发插件传递的所有参数，对齐 createPost 逻辑
  const handleModuleCmd: SendCmd<{
    moduleId: string;
    fixedParams?: any;
    data?: Record<string, any>;
    params?: any;
    config?: AxiosRequestConfig;
  }, Response<any>> = async (moduleName, cmd, cmdParams) => {
    if (moduleName !== "UserForm") return { code: 400, msg: "模块不匹配", data: null };

    console.log("来自插件的请求--UserForm");
    console.log("平台接收用户指令：", cmd, cmdParams);

    const { commandName, command } = cmdParams?.fixedParams || {};
    const unifiedCommand = commandName || command || "";

    let url = `/api/User/SendCommand`;
    if (unifiedCommand === "GetMethodDescription") {
      url = `/api/User/GetMethodDescription`;
    }

    // 直接调用平台的 handlePluginCommand，传递所有参数（复刻 createPost 逻辑）
    return handleCommand(
      url, // url
      cmdParams?.fixedParams, // 固定参数（对齐 createPost 的 fixedParams）
      cmdParams?.data, // 业务数据（对齐 createPost 的 data）
      cmdParams?.params, // URL 参数（对齐 createPost 的 params）
      cmdParams?.config // Axios 配置（对齐 createPost 的 config）
    );
  };

  // 3. 创建插件实例：完全对齐原有调用方式
  const userModule: ModuleInterface<typeof initialUserData> = createUserModule(
    handleModuleCmd,
    initialUserData
  );

  // 关键：更新响应式引用，而不是重新提供
  sendUserCmd.value = (cmd: string, cmdParams?: any) => {
    return userModule.sendCommand(cmd, cmdParams);
  };
  getUserData.value = () => userModule.eventData;

  // 5. 手动初始化插件
  await userModule.startup();

  // 关键：在所有初始化完成后才允许渲染组件
  isComponentLoaded.value = true;
};

onMounted(async () => {
  await importMoudule();
  console.log("createTaskModule", createUserModule, "TaskForm", UserForm);
  await loadModule();
  (moudleRef.value as any)?.dataEvent(index.value);
})

</script>

<style lang="scss" scoped>
.user-view {
  height: 100%;
  overflow: hidden;
  /* 禁止外层容器滚动 */
  position: relative;
  background-color: rgb(255, 255, 255);

  .scroll-bar {
    height: 100%;
    width: 100%;

    /* 纵向滚动条 */
    :deep(.el-scrollbar__bar.is-vertical) {
      width: 3px;
      right: 2px;

      .el-scrollbar__thumb {
        background: rgba(80, 80, 80, 0.6);
        border-radius: 3px;

        &:hover {
          background: rgba(50, 50, 50, 0.8);
        }
      }
    }

    /* 横向滚动条 */
    :deep(.el-scrollbar__bar.is-horizontal) {
      height: 3px;
      bottom: 2px;

      .el-scrollbar__thumb {
        background: rgba(80, 80, 80, 0.6);
        border-radius: 3px;

        &:hover {
          background: rgba(50, 50, 50, 0.8);
        }
      }
    }
  }
}
</style>
